import React, { PureComponent } from "react";
import "./index.less";
import InfiniteScroll from "react-infinite-scroll-component";
import connect from "@/connect.js";
const isIPhone = new RegExp("\\biPhone\\b|\\biPod\\b", "i").test(
  window.navigator.userAgent
);
let moneyKeyboardWrapProps;
if (isIPhone) {
  moneyKeyboardWrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
@connect
class dropDownForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      hasMore: true, // 是否开启下拉加载
    };
  }
  render() {
    const { hasMore } = this.state;
    const { data, content } = this.props;
    return (
      <InfiniteScroll
        dataLength={data.length}
        loader={
          <div style={{ marginTop: "20px", marginBottom: "20px" }} key={0}>
            <p align="middle">{content}</p>
          </div>
        }
        initialLoad={true} // 不让它进入直接加载
        next={this.props.loadMoreData} //监听的ajax请求
        hasMore={data.length === 240 ? false : hasMore} // 是否继续监听滚动事件 true 监听 | false 不再监听
        pullDownToRefresh={true}
        refreshFunction={this.props.loadMoreDataTwo}
        pullDownToRefreshThreshold={0}
        scrollThreshold="0px"
        pullDownToRefreshContent={
          <h4 style={{ textAlign: "center" }}>&#8595; 下拉刷新</h4>
        }
        releaseToRefreshContent={
          <h4 style={{ textAlign: "center" }}>&#8593; 释放以刷新</h4>
        }
      >
        <div>
          {data.map((value, key) => (
            <div style={{ height: 100 }} key={key}>
              {" "}
              {value.title}{" "}
            </div>
          ))}
          {data.length === 240 ? (
            <h4 style={{ textAlign: "center" }}>暂无更多</h4>
          ) : (
            ""
          )}
        </div>
      </InfiniteScroll>
    );
  }
}
export default dropDownForm;
